<template>
  <div class="os-monitor">
    <video-player :options="playerOptions"
                  class="vjs-custom-skin">
    </video-player>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  import 'video.js/dist/video-js.css'
  import 'videojs-contrib-hls'
  import { videoPlayer } from 'vue-video-player'
  export default defineComponent({
    props: {
      playerOptions: {
        type: Object,
        default: () => {
          return {
            width: '442',
            height: '250' || 'auto',
            autoplay: true, // 自动播放
            muted: false, // 是否默认静音
            language: 'zh-CN', // 语言
            aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            // techOrder: ['flash'],
            // playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
            controls: true, // 是否可操作
            sources: [
              {
                // type: 'video/mp4', // mp4视频
                // src: require('./demo.mp4')
                type: 'application/x-mpegURL', // hls 直播流
                // src,
                // type: 'rtmp/mp4', // rtmp流
                // src: res
              },
            ],
            controlBar: {
              // 操作按钮
              timeDivider: false,
              durationDisplay: false,
              remainingTimeDisplay: false,
              fullscreenToggle: true, //全屏按钮
            },
            flash: { hls: { withCredentials: false } },
            html5: { hls: { withCredentials: false } },
            // loop: false, // 导致视频一结束就重新开始
            notSupportedMessage: '无法获取到视频流', // 允许覆盖Video.js无法播放媒体源时显示的默认信息
            // poster: require('@/assets/img/side-ball.png'), // 封面
          }
        },
      },
    },
    components: { videoPlayer },
    setup(props) {},
  })
</script>
<style lang="scss" scoped>
  @include e(monitor) {
    border: 1px solid;
    border-image: linear-gradient(185deg, $--color-jb1, $--color-jb1) 1 1;
  }
</style>